<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计算语法</title>
</head>

<body>
    <div id="app">
        <!-- 直接拼接  语法过于繁琐 不建议使用-->
        <h2>{{firstName + '·' + lastName}}</h2>
        <h2>{{firstName}} · {{lastName}}</h2>
        <!-- 用methods方法 -->
        <h2>{{getFullName()}}</h2>

        <!-- 计算属性 computed -->
        <h2>{{fullName}}</h2>
    </div>

    <div id="test">
        <!-- 过于麻烦繁琐 -->
        <h2>总价格：{{books[0].price + books[1].price + books[2].price + books[3].price}}</h2>

        <!-- reduce()  -->
        <h2>总价格：{{totalPrice}}</h2>

    </div>

    <script src="./js/vue.min.js"></script>
    <script>
        const  app = new Vue({
            el: '#app',
            data: {
                firstName: 'Lebron',
                lastName: 'James'
            },
            computed: {
                // fullName: function() {
                //     return this.firstName + '·' + this.lastName
                // }

                // 原理
                // 计算属性完整写法，本质，set不常用，一般情况不写，所以可以用减半写法
                // 计算属性一般是没有set方法，只读属性
                fullName:{
                    // set: function(){

                    // },
                    get: function(){
                        return this.firstName + '·' + this.lastName
                    }
                }
                // 计算属性一般是没有set方法，只读属性
                // 简便写法
                // fullName: function() {
                //     return this.firstName + '·' + this.lastName
                // }

                // fullName 是一个属性，调用时不需要()

            },
            methods: {
                getFullName() {
                    return this.firstName + '·' + this.lastName
                }
            }
        })

        const test = new Vue({
            el: '#test',
            data: {
                books: [
                    {id: 110, name: "Unix编程艺术", price: 119},
                    {id: 111, name: "代码大全", price: 98},
                    {id: 112, name: "深入理解计算机原理", price: 139},
                    {id: 113, name: "现代操作系统", price: 199}
                ]
            },
            computed:{
                totalPrice: function() {
                    // return this.books.reduce()
                    let result = 0
                    console.log(result)
                    for (let i=0;i<this.books.length;i++){
                        result += this.books[i].price
                    }
                    console.log(result)
                    return result

                    // es6
                    // for (let i in this.books){
                        
                    // }
                    // for(let book of this.books){

                    // }
                    
                }

                
            }
        })
        

    </script>
</body>

</html>